<template>
  <div class="block" style="width: 500px;margin: 80px auto">
    <el-form :model="form" ref="form" label-width="80px">
      <el-form-item   label="顾客账号">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item label="选择商品">
        <el-select v-model="value1" multiple placeholder="请选择">
          <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.title"
              :value="item.price">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择服务">
        <el-select v-model="value2" multiple placeholder="请选择">
          <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.title"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="总价">￥{{cartTotalPrice}}</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onCommit">计算</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onBuy">确认购买商品</el-button>
        <el-button @click="onBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartTotalPrice:'',
      form: {
        name: '',
      },
      options1: [],
      value1: [],
      options2: [],
      value2: [],
    };
  },
  methods: {
    onCommit(){
      console.log(this.value1)
      //将商品价格做和
      for (let num of this.value1) {
        console.log(typeof num)
        this.cartTotalPrice=Number(this.cartTotalPrice)+Number(num)
      }
      //在商品价格基础上,将服务价格做和
      for (let num of this.value2) {
        console.log(typeof num)
        this.cartTotalPrice=Number(this.cartTotalPrice)+Number(num)
      }
    },
    onBack(){
      this.$message.success("不买东西了,回到首页")
    },
    onBuy(){
      this.$message.success("可以弹出一个收款二维码,购买成功")
    },
    onSubmit() {
      this.$message.success("跳转页面至用户详情信息页")
    }
  },
  //created方法中还需要查询所有可用服务的信息,主要包括服务名字+价格(我是直接把查询有效商品列表的方法粘过来的)
  //并把查到的response.data放在this.options2中,以便onCommit()可以直接用options2放在:value中的价格
  created:function () {
    console.log("开始执行加载展示商品列表功能```")
    let url="http://localhost:9081/product/selectNotOverDue"
    console.log(url)
    this.axios.get(url).then( (response)=> {
      this.options1=response.data
      console.log(this.options1)
    })
  }
}
</script>


<style lang="scss" scoped>

</style>